<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片选择与预览</title>
  <script src="https://unpkg.com/axios@1.9.0/dist/axios.min.js"></script>
  <style>
    label {
      display: inline-block;
      padding: 10px 15px;
      background-color: #007bff;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }

    label:hover {
      background-color: #0056b3;
    }

    input[type="file"] {
      display: none;
    }

    img {
      border: 1px solid #ddd;
      border-radius: 5px;
      max-width: 300px;
      margin-top: 10px;
    }

    /**
    */
  </style>
</head>

<body>
  <label for="imageUpload">选择图片</label>
  <!-- accept="image/*"是为了限制文件类型为图片 -->
  <input type="file" id="imageUpload" accept="image/*">
  <img id="previewImage" src="#" alt="预览图片" style="display:none;">

  <script>
    // 初始化一个变量用于保存图片的URL
    let imageUrl = null; // 保存图片URL的变量

    // 为图片上传控件添加change事件监听器
    document.getElementById('imageUpload').addEventListener('change', function (event) {
      const file = event.target.files[0];
      if (file) {
        if (imageUrl) {
          console.log(imageUrl);
          URL.revokeObjectURL(imageUrl); // 释放旧的图片URL
        }
        // 使用 URL.createObjectURL 可以将图片文件转换为 blob URL，而不是 base64 编码
        /*
          数据格式：URL.createObjectURL 返回的是一个以 blob: 开头的临时 URL，指向文件对象。
          内存占用：这种方法由于不需要将文件内容转换为 Base64 编码，因此内存占用较小。
          使用场景：适合需要快速显示图片的场景，尤其是在不需要将图片数据嵌入到 HTML 或 CSS 中的情况下。
          错误处理：建议在实际操作中添加错误处理机制，以应对文件类型不正确或其他异常情况。
        */

        imageUrl = URL.createObjectURL(file); // 创建新的文件URL

        const previewImage = document.getElementById('previewImage');
        previewImage.src = imageUrl; // 设置图片的src属性
        previewImage.style.display = 'block'; // 显示图片
      }
    });




    // 发送请求

    const content = `
第6章 系统测试与评价

6.1 功能模块测试

系统测试是毕业生发展跟踪系统开发过程中确保系统健壮性和完整性的关键环节。通过系统化的测试流程，可以有效检测和发现系统中存在的潜在问题，为开发人员提供调试依据，进而保证系统的稳定性和安全性。本章将重点对系统核心功能模块进行测试验证。

在测试策略上，考虑到系统模块较多，我们采用抽样测试方法，选取用户管理模块、校友服务模块和系统管理模块三个核心模块进行详细测试。测试过程中综合运用了白盒测试和黑盒测试方法，其中白盒测试主要采用路径覆盖技术。路径覆盖是白盒测试中的一种典型方法，其基本思想是通过设计测试用例，确保程序中的每条可能执行路径至少被执行一次（Myers, 2004）。这种方法能够有效验证程序逻辑的正确性，发现潜在的逻辑错误。

用户管理模块测试主要包含系统登录验证和用户信息管理两个部分。在登录功能测试中，我们设计了以下测试用例：

正常登录测试用例：
输入：合法的用户名（5-10位字符）、密码（6-15位非空字符）
预期输出：登录成功，跳转至相应用户角色首页
实际验证：系统正确获取用户简略信息（包括用户名、昵称、头像和角色身份），并将信息持久化存储至浏览器本地存储空间

异常登录测试用例：
输入：错误的用户名或密码
预期输出：系统返回相应错误提示（"用户名不存在"或"密码错误"）
实际验证：系统能够准确识别错误类型并给出对应提示

格式校验测试用例：
输入：不符合格式要求的用户名或密码
预期输出：系统在校验阶段即阻止提交，并提示格式错误
实际验证：前端校验机制有效拦截非法输入

在用户权限管理测试中，我们重点验证了角色权限控制机制：

管理员权限测试：
以管理员账号（admin）登录后，系统自动跳转至管理员控制面板。该面板包含毕业生信息管理、就业数据地图分布和深造统计等专属功能模块。测试确认管理员可以自由切换至普通用户首页，且切换路径符合设计要求。

学生权限测试：
以学生账号登录后，系统直接跳转至普通用户首页。测试验证了以下关键点：

界面未显示任何管理员功能入口
强制访问管理员路径时，系统正确返回403无权限访问页面
路由守卫机制有效拦截了未授权访问
测试结果表明，系统的权限控制机制运行良好，能够准确区分不同用户角色并实施相应的访问控制策略。所有测试用例均通过验证，达到了预期设计目标。通过本次测试，不仅验证了系统核心功能的正确性，也为后续的系统优化提供了重要参考依据。



提取上面的文字的摘要,不超过250字
`

    const aiSummary = () => {
      axios.post('https://aichat.api.ecylt.top/', { q: content })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });

    }
    // aiSummary();

    const interfaceBoxId = '10004394'
    const interfaceBoxKey = '9ef38cee79e739a88587d5008fa60958'
    const getGlobalCountries = async () => {

      const { data: { data } } = await
        axios.get('http://124.220.49.230/api/other/country.php',
          {
            params: {
              id: interfaceBoxId,
              key: interfaceBoxKey
            }
          }

        )
      console.log(data);
      // 1. 提取所有中文名称到新数组
      const cnNames = data.map(item => item.m_cn_name);

      // 2. 按拼音逆序排序（使"中国"在前）
      const sortedNames = cnNames.sort((a, b) => b.localeCompare(a, 'zh'));

      console.log('按拼音逆序排序:', sortedNames);

      // 如果需要完整对象按中文名逆序：
      // const sortedData = [...data].sort((a, b) =>
      //   b.m_cn_name.localeCompare(a.m_cn_name, 'zh')
      // );
      // console.log('完整对象逆序:', sortedData);
    }
    getGlobalCountries()

    // const getPerfectIp = async () => {
    //   const response = await axios.get('https://api.apihz.cn/getapi.php',{
    //     params: {
    //       id: id,
    //       key: key
    //     }
    //   });
    //   console.log(response);
    //   const ip = response.data.ip;
    //   console.log(ip);
    // }
    // getPerfectIp();

  </script>
</body>

</html>